<template>
    <div>
        <ul>
            <li v-for="item in myList" :key="item.label">
                <span 
                v-if="item.children && item.children.length" 
                :class="{ 'icon': item.isShow }"> 
                > </span>
                <span @click="item.isShow=!item.isShow">
                    {{item.label}}
                    <input type="checkbox" :checked="item.isChecked" 
                    @click.self="changeChecked(item)">
                </span>
                
                <!-- 组件自调用=>利用组件的name属性，可以使得组件自调用 -->
                <hhztree 
                v-if="item.children && item.children.length" 
                :list="item.children"
                v-show="item.isShow"
                >
                </hhztree>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'hhztree',
        data(){
            return {
                // isChecked: true,
                // li显示和隐藏=>下面把isShow属性加到每一个li
                // isShow: false,
                // 数据经过处理（为每一个li加上isShow属性）
                myList: this.list.map( item => {
                    return {
                        label: item[this.keys.label],
                        children: item[this.keys.children],
                        isChecked: item[this.keys.isChecked],
                        isShow: false,
                    }
                })

            }
        },
        props:{
            list:{
                type: Array,
                required: true
            },
            //keys是传值过来的是键名，因为数据的键名是用户传入，不一定都相同
            keys: {
                type: Object,
                default: () => {
                    return {
                        label: "label"
                        ,children: "children"
                    }
                } 
            } 
        },
        methods:{
            changeChecked(node){
                 console.log(node.isChecked)
                node.isChecked = !node.isChecked;
                this.traversNode(node);
            },
            // 递归遍历node节点
            traversNode(node){
                if(node.children && node.children.length){
                    node.children.forEach(item => {
                        item.isChecked = !item.isChecked;
                        console.log(item.label,item.isChecked);
                        this.traversNode(item);
                    });
                }
            }
        },
    }
</script>

<style lang="scss" scoped>
    li{
        list-style: none;
        // width: 80px;
        border-radius: 0 25px 25px 0;
        text-align: center;
        line-height: 20px;
        background-color: palegreen;
        margin: 2px 2px 0 0;
        color: palevioletred;
    }
    .icon{
        // transiton不能用于行内元素
        display: inline-block;
        transform: rotateZ(90deg);
        transition: all .2s linear;
        font-weight: 900;
    }
</style>